<template>
  <div class="max-w-4xl mx-auto p-4">
    <a-card>
      <a-typography-title :level="2">行号添加工具</a-typography-title>
      
      <a-form layout="vertical">
      <!-- 输入区域 -->
        <a-form-item>
          <a-textarea
            v-model:value="inputText"
          placeholder="请输入要添加行号的文本..."
            :rows="6"
            :auto-size="{ minRows: 6, maxRows: 12 }"
            class="font-mono"
          />
        </a-form-item>

        <a-row :gutter="24">
          <!-- 起始行号 -->
          <a-col :span="8">
            <a-form-item label="起始行号">
              <a-input-number
                v-model:value="startNumber"
                :min="1"
                :max="999999"
                class="w-full"
              />
            </a-form-item>
          </a-col>

          <!-- 行号宽度 -->
          <a-col :span="8">
            <a-form-item label="行号宽度">
              <a-input-number
                v-model:value="numberWidth"
                :min="1"
                :max="10"
                class="w-full"
              />
            </a-form-item>
          </a-col>

          <!-- 分隔符 -->
          <a-col :span="8">
            <a-form-item label="分隔符">
              <a-input
                v-model:value="separator"
                placeholder="|"
                :maxLength="5"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 选项 -->
        <a-form-item>
          <a-space direction="vertical">
            <a-checkbox v-model:checked="options.zeroPadding">使用零填充</a-checkbox>
            <a-checkbox v-model:checked="options.skipEmptyLines">跳过空行</a-checkbox>
          </a-space>
        </a-form-item>

      <!-- 操作按钮 -->
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="addLineNumbers" :disabled="!inputText">
          添加行号
            </a-button>
            <a-button @click="clearText" :disabled="!inputText">
              清空
            </a-button>
          </a-space>
        </a-form-item>

      <!-- 结果区域 -->
        <template v-if="outputText">
          <a-divider>处理结果</a-divider>
          <a-space direction="vertical" class="w-full">
        <div class="flex justify-between items-center">
              <span class="text-gray-500">共 {{ lineCount }} 行</span>
              <a-tooltip :title="copied ? '已复制！' : '复制到剪贴板'">
                <a-button
                  type="text"
            @click="copyToClipboard"
                  :icon="copied ? h(CheckOutlined) : h(CopyOutlined)"
                >
                  {{ copied ? '已复制' : '复制' }}
                </a-button>
              </a-tooltip>
        </div>
            <a-card class="w-full bg-gray-50">
              <pre class="font-mono whitespace-pre-wrap break-all">{{ outputText }}</pre>
            </a-card>
          </a-space>
        </template>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const inputText = ref('');
const outputText = ref('');
const startNumber = ref(1);
const numberWidth = ref(4);
const separator = ref('|');
const copied = ref(false);

const options = ref({
  zeroPadding: true,
  skipEmptyLines: false
});

const lineCount = computed(() => {
  if (!outputText.value) return 0;
  return outputText.value.split('\n').filter(line => line.length > 0).length;
});

const addLineNumbers = () => {
  if (!inputText.value) {
    message.warning('请输入要处理的文本');
      return;
    }

  try {
    const lines = inputText.value.split('\n');
    let currentNumber = startNumber.value;
    const numberedLines = lines.map(line => {
      // 如果设置跳过空行且当前行为空，则直接返回空行
      if (options.value.skipEmptyLines && !line.trim()) {
        return line;
      }

      // 生成行号
      let lineNumber = currentNumber.toString();
      if (options.value.zeroPadding) {
        lineNumber = lineNumber.padStart(numberWidth.value, '0');
      } else {
        lineNumber = lineNumber.padStart(numberWidth.value, ' ');
      }

      // 只有非空行才增加行号
      if (!options.value.skipEmptyLines || line.trim()) {
    currentNumber++;
      }

      return `${lineNumber}${separator.value}${line}`;
  });

    outputText.value = numberedLines.join('\n');
    message.success('添加行号成功！');
  } catch (err) {
    message.error('处理失败，请检查输入');
    console.error('处理失败:', err);
  }
};

const clearText = () => {
  inputText.value = '';
  outputText.value = '';
  message.success('已清空');
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value);
    copied.value = true;
    message.success('复制成功！');
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    message.error('复制失败，请重试');
    console.error('复制失败:', err);
  }
};
</script> 

<style scoped>
.ant-card {
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 24px;
}

:deep(.ant-input-number) {
  width: 100%;
}
</style> 